<template>
  <el-container name="container">
    <el-header class="top b_rd_5 pl20 ptb10 lh38 b-ddd-1 bgcolor1 clearfix">
      文章管理
      <el-button class="fr mr10 f12" type="primary" @click="dlgType(2)">新增</el-button>
    </el-header>
    <div v-if="articleList.data" class="mt10">
      <el-table :data="articleList.data" border style="width: 100%">
        <el-table-column
          v-for="(item ,index) in returnDatas.tableLable"
          align="center"
          :formatter="filter"
          header-align="center"
          :prop="item.prop"
          :label="item.label"
          :key="index"
        ></el-table-column>
        <!-- <el-table-column align="center" prop="content" label="内容">
          <template slot-scope="scope">
            <div class="dis-ib" v-html="scope.row.content"></div>
          </template>
        </el-table-column>-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="dlgType(3,scope.row)" type="text" size="small">详情</el-button>
            <el-button @click="dlgType(4,scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="dlgType(1,scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 start-->
    <el-dialog
      :title="title"
      :class="dlgClass"
      :before-close="close"
      :width="width"
      :visible.sync="dlgVisible"
      :close-on-click-modal="!1"
      center
    >
      <div v-if="dlgClass==='dlgAddForm'">
        <el-form
          ref="addForm"
          :rules="rules"
          class="demo-form-inline"
          label-width="80px"
          :model="addForm"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题" prop="title">
                <el-input v-model="addForm.title" autocomplete="off" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容" prop="content">
                <vue-editor id="editor" v-model="addForm.content" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel('addForm')">取 消</el-button>
          <el-button type="primary" :loading="subLoading==1" @click="dlgSub(1)">确 定</el-button>
        </div>
      </div>
      <div v-else-if="dlgClass='detail' ">
        <h1 class="tc f40" v-if="returnDatas.apiData.title">{{returnDatas.apiData.title}}</h1>
        <div
          v-if="returnDatas.apiData.content"
          class="articleDetail"
          v-html="returnDatas.apiData.content"
        ></div>
      </div>
    </el-dialog>
  </el-container>
</template>
 
<script>
import { $Http } from '@/plugins/axios'
import store from '@/store/index'
import { znk } from '@/assets/util/public'
import { rules } from '@/assets/util/rules'

export default {
  layout: 'admin',
  data() {
    return {
      width: '50%',
      isClient: false,
      title: '新增',
      dlgClass: 'dlgAddForm',
      dlgVisible: false,
      rules: rules,
      subLoading: null,
      dlgIndex: null,
      addForm: { title: '', content: null },
      returnDatas: {
        apiData: {}, // 当前列数据
        tableLable: [
          // 表格字段
          {
            label: '标题',
            prop: 'title'
          },
          // {
          //   label: '内容',
          //   prop: 'content'
          // },
          {
            label: '创建时间',
            prop: 'createTime'
          },
        ],
        tableData: {}, // 表格数据
        defaultProps: {
          children: 'children',
          label: 'name'
        },
      }
    }
  },
  async asyncData({ req, res }) {
    // /article/articleList
    return $Http('get', 'api/admin/article/articleList', null, req).then((data) => {
      return { articleList: data }
    })
  },

  methods: {
    filter(r, c) {
      console.log(r, c)
      if (c.property == "content") {
        //是否启用
        return r.content;
      } else {
        return r[c.property];
      }
    },
    cancel(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
      }
      this.dlgVisible = false;
    },
    close(done) {
      this.cancel('addForm')
      done()
    },
    listPage() {
      $Http('get', 'api/admin/article/articleList').then((data) => {
        this.articleList = data
      })
    },
    // 准备富文本编辑器
    onEditorReady(editor) { },
    // 富文本编辑器 失去焦点事件
    onEditorBlur(editor) { },
    // 富文本编辑器 获得焦点事件
    onEditorFocus(editor) { },
    // 富文本编辑器 内容改变事件
    onEditorChange(editor) { },
    // 表格元素过滤
    dlgType(type, apiData) {
      let that = this
      that.dlgVisible = true
      that.width = '50%'
      that.returnDatas.apiData = apiData || {}
      that.dlgIndex = type
      if (type === 1) {
        //删除
        that.dlgVisible = false
        $Http('post', 'api/admin/article/del', { id: apiData.id }).then((data) => {
          this.listPage()
        })
      } else if (type === 2 || type === 4) {
        //新增
        if (type === 2) {
          this.title = '新增'
        } else if (type === 4) {
          this.title = '修改'
          this.addForm.content = apiData.content
          this.addForm.title = apiData.title
        }
        this.dlgClass = 'dlgAddForm'
      } else if (type === 3) {
        //详情
        this.title = '详情'
        this.width = '80%'
        this.dlgClass = 'detail'
      }
    },
    dlgSub(type) {
      //新增文章提交
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          if (type === 1) {
            let url = 'api/admin/article/add'
            let param = { title: this.addForm.title, content: this.addForm.content }
            if (this.dlgIndex === 2) {
              //新增提交
              url = 'api/admin/article/add'
            } else if (this.dlgIndex === 4) {
              url = 'api/admin/article/update'
              param.id = this.returnDatas.apiData.id
            }
            $Http('post', url, param).then((data) => {
              this.listPage()
              this.cancel('addForm')
            })
          }
        }
      })
    }
  },
  mounted() {
    // if (process.client) {
    //   const { VueEditor } = require('vue2-editor')
    //   this.$options.components = { VueEditor }
    //   this.isClient = true
    // }

  },
  watch: {
    '$route': function () {
      console.log('$route has changed.', this)
    }
  }
}
</script>